<template>
  <div class="member-list">
    <uni-indexed-list :options="list" :show-select="true" @click="bindClick" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { listMemberByCoachUserId } from '@/api/manageApi'
import Pinyin from "js-pinyin";
export default {
  data() {
    return {
      list: [],
      memberArr: []
    }
  },
  computed: {
    ...mapGetters(["userInfo", "uniToken"]),
  },
  onLoad(option) {
    this.listMemberByCoachUserId(option.coachId)
  },
  methods: {
    bindClick(e) {
      // console.log(e)
			this.getOpenerEventChannel().emit('sonPageData', this.memberArr[e.item.itemIndex])
			this.$nextTick(() => {
				this.goBackUrl()
			})
    },
    sortByFirstLetter(origin) {
      // 将目标数据进行排序
      origin = origin.sort((pre, next) =>
        Pinyin.getFullChars(pre.userName).localeCompare(Pinyin.getFullChars(next.userName))
      );
      const newArr = [];
      origin.map((item) => {
        // 取首字母
        const letter = Pinyin.getFullChars(item.userName).charAt(0);
        const index = newArr.findIndex((subItem) => subItem.letter === letter);
        if (index < 0) {
          newArr.push({
            letter: letter,
            data: [(item.userName + ' ' + item.phone)],
          });
        } else {
          newArr[index].data.push((item.userName + ' ' + item.phone));
        }
      });
      return newArr;
    },
    listMemberByCoachUserId (coachId) {
      var params = {
        coachUserIdd: coachId
      }
      listMemberByCoachUserId(params).then(res => {
        console.log(res)
        if (res.code == '200') {
          var data = res.data
          this.memberArr = data
          this.list = this.sortByFirstLetter(this.memberArr)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.ac-records {
  background: #fff;

  .record-table {
    width: 100%;
    text-align: center;
    table-layout: fixed;
    empty-cells: show;
    border-collapse: collapse;
    font-size: 28rpx;
    color: #575757;
  }

  .record-table tr th {
    height: 76rpx;
    line-height: 76rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #ff5d3d;
    font-size: 28rpx;
    color: #ffffff;
    font-weight: 400;
  }

  .record-table tr td {
    height: 76rpx;
    line-height: 76rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .record-table tr:nth-child(odd) {
    background: #fff;
  }

  .record-table tr:nth-child(even) {
    background: #fff3eb;
  }
}
</style>
